<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并问题</title>
		<style>
			/* 父级元素设置：宽高、边框 */
		div.parent{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			margin-bottom: 150px;
		}
		div.son{
			width: 100px;
			height: 100px;
			border: 1px solid red;
			margin-top: 100px;
		}
		/* 以上【外边距垂直合并】1.外部外边距垂直会合并，最大值为准 
		                         建议：最小的外边距删掉
		*/
	   div.parent{
		   width:300px ;
		   height: 300px;
		   /* 填充：没有空间*/
		   background-color: #a7a7a7;
		   /*上外边距：100px*/
		   margin-top: 100px;
		   /* 推荐：找到父级元素加溢出隐藏，父级元素隐藏,余出空间，正常加外边距*/
		   ove rflow: auto;
		   /* 建议：找到父级元素加一个边框*/
		   bord er: 1px solid transparent;
		   /* 不推荐：内边距占空间，找到发生问题的位置*/
		   padding-top: 1px;
	   }
	   div.son{
		   width:100px ;
		   height: 100px;
		   background-color: #f00;
		   /* 上外边距：40px*/
		   margin-top: 110px;
		   }
		   /* 以上【外边距垂直合并】2.【内部】外边距垂直会合并，最大值为准
		                            解决方案：①溢出隐藏，转换为块级上下文结构
									         找到父元素添加overflow：hidden或者auto
											 ②加1个像素，透明边框，具体的位置内边距：
											
		   */
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son"></div>
		</div>
	</body>
</html>